import React from 'react'
import { history } from 'umi'
import { data } from '../data'

interface IProps {
    dataList: data[],
    navTitle: string
}

const redirect = () => {

}
export default (props: IProps) => {
    const { dataList, navTitle } = props
    return (
        <>
            <nav style={{ borderLeft: "4px solid #4685FD", paddingLeft: "6px" }}>{navTitle}</nav>
            <ul style={{ marginTop: "20px", padding: 0, display: "flex", flexWrap: "wrap" }}>
                {
                    dataList.map((item: data, inx: number) => {
                        return (
                            <li key={inx} style={{
                                width: "18%", marginBottom: "20px", display: "flex",
                                alignItems: "center", padding: "20px", border: "1px solid #E5E5E5",
                                margin: "10px calc(10% / 10)", position: "relative",
                                cursor: "pointer"
                            }}
                                onClick={() => {
                                    history.push(item.path)
                                }}
                            >
                                <img src={item.url} alt="" style={{ height: "60px", width: "60px" }} />
                                <div style={{ marginLeft: "8px" }}>
                                    <div> {item.title}</div>
                                    <span> {item.desc}</span>
                                </div>
                                {
                                    item.status === "pending" && <div style={{
                                        backgroundImage: "linear-gradient(to right, #fb8700, #fb6400)",
                                        width: "70px", height: "30px", color: "white",
                                        position: "absolute",
                                        right: 0, top: 0,
                                        textAlign: "center",
                                        lineHeight: "28px"
                                    }}>敬请期待</div>
                                }
                            </li>
                        )
                    })
                }
            </ul>
        </>
    )
}